<template>
  <div>
    <div class="rq">
      
      <ul class="orderIt" style="width: 250px" v-for="(order,key) of orderData" :key="key" v-if="order.length > 0">
        <li v-if="order.length > 0"><h1 class="sortTitle" >{{key}}</h1></li>
        <li v-if="order.length > 0"><el-divider class="fg"></el-divider></li>
        <li class="top1" v-if="order.length > 0">
          <div class="info">
            <span class="top1Sort">NO.1</span>
            <div class="top1title">{{order[0].bookName}}</div>
            <div class="sortyuanyin">
              <span style="font-size: 20px">{{order[0].orderField}}</span>月票
            </div>
            <div class="other">
              <span class="hoverRed">{{order[0].parentCatalog}}</span> -
              <span class="hoverRed">{{order[0].writerName}}</span>
            </div>
          </div>
          <div class="ig">
            <el-image
              class="top1img"
              :src="order[0].bookImgUrl"
              fit="cover"
            ></el-image>
            <div class="ying"></div>
          </div>
        </li>

        <li v-for="(item,index) in order.slice(1, order.length)" :key="item.id">
          <div class="sort">{{index+2}}</div>
          <div class="orderItemInfo">
            <span class="name">{{item.bookName}}</span>
            <span class="sortInfo">530566</span>
          </div>
        </li> 
      </ul>
    </div>
  </div>
</template>

<script>
import BookListItem from "@/components/BookListItem.vue";
import {bookListAll} from "@/api";
export default {
  components: { BookListItem },
  data() {
    return {
      orderData: {}
    };
  },
  watch: {
    "$route.query.catalog": {
      immediate: true, //初始化时让handler调用一下
      handler(val, oldval) {
        console.log("oldval改变了",val,oldval);
        if (val == "全部分类") {
          val = "";
        }
        bookListAll(val)
          .then(({ data }) => {
            console.log(data);
            this.orderData = data.data;
          })
          .catch((err) => {});
      },
    },
  },
  created(){
  }
};
</script>

<style scoped>
/* .titleh {
  font-size: 26px;
  line-height: 26px;
  margin-bottom: 15px;
  font-weight: 400;
}
.catarq {
  margin: 20px 0;
}
.catalogAll {
  color: #ed4259;
  font-weight: 700;
  font: 12px/40px PingFangSC-Regular, -apple-system, Simsun;
  background: #f7f6f2;
}
.catalogAll li {
  margin-left: 10px;
  margin-right: 10px;
}
.catalogAll::after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.catalogAll {
  *zoom: 1;
} */
.rq {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: space-between;
}
/* 清除浮动 */
.rq li::after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.rq li {
  *zoom: 1;
}
.fg {
  margin: 10px 0;
}
.sortTitle {
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 400;
  height: 24px;
  line-height: 25px;
}
/* 清除浮动 */
.top1::after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.top1 {
  *zoom: 1;
}
/* top1 */
.info {
  float: left;
}
.ig {
  float: right;
  /* 透视，规定视距,近大远小,必须写在父容器中 */
  perspective: 100px;
  /* 子元素保持3D效果，必须写在父容器中 */
  transform-style: preserve-3d;
  margin-right: 30px;
}
.top1Sort {
  background: #bf2c24;
  color: #fff;
  font: 700 14px/18px Arial;
  height: 18px;
  margin-bottom: 3px;
  text-align: center;
  width: 36px;
}
.top1title {
  color: #262626;
  font-size: 20px;
}
.sortyuanyin {
  color: #bf2c24;
  font-size: 12px;
  height: 24px;
  margin-bottom: 4px;
  overflow: hidden;
  padding: 3px 0 0;
}
.other {
  color: #a6a6a6;
}
.hoverRed:hover {
  color: #262626;
}
.top1img {
  position: relative;
  width: 70px;
  height: 100px;
  /* y轴旋转 */
  transform: rotateY(-20deg) translate3d(0px, 0px, -14px);
  box-shadow: 4px 1px 0px #888888;
}
.ying {
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100px;
  transform: rotateY(20deg) translate3d(15px, 0px, 0px);
  background: #bdbdbd;
  box-shadow: 3px 3px 0px #888888;
}
/* translate3d(0px, 0px, -50px) */
/* item */
.sort {
  float: left;
  width: 16px;
  height: 16px;
  margin-top: 11px;
  background: red;
  line-height: 16px;
}
.orderItemInfo {
  /* display: inline-block; */
  float: right;
  border-top: solid 1px #e6e6e6;
  padding: 10px 0;
  width: 90%;
}
.name {
  float: left;
}
.sortInfo {
  float: right;
}
li > .sort {
  font: 700 14px/16px Arial;
  font-weight: bolder;
  color: #ffffff;
}
.orderIt {
  margin-bottom: 20px;
}
.orderIt > li:nth-child(4) > .sort {
  /* height: 20px; */
  background: #e67225;
}
.orderIt > li:nth-child(5) > .sort {
  /* height: 20px; */
  background: #e6bf25;
}
.orderIt > li:nth-child(n + 6) > .sort {
  /* height: 20px; */
  background: #ededed;
  color: #666666;
}
</style>